/**
 * @name Project
 * @author darcrand
 * @desc 项目详情
 */

import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { inject, observer } from 'mobx-react'
import { Row, Col, Breadcrumb, Divider, Avatar, Button } from 'antd'
import moment from 'moment'

import { TopBar } from '@/components'
import TodoList from './TodoList'
import { apiGetProjectById } from '@/apis/project'
import styles from './styles.module.less'

const serverUrl = process.env.REACT_APP_SERVER_URL

@inject('user')
@observer
class Project extends Component {
  state = {
    data: {
      _id: '',
      bgColor: '',
      coverUrl: '',
      createdAt: '',
      desc: '',
      members: [],
      owner: { nickname: '', avatar: '' },
      status: '',
      title: '',
      updatedAt: '',

      // 用来显示的日期描述
      date: '',
    },

    isOwner: false,
  }

  componentDidMount() {
    this.getDetail()
  }

  getDetail = async () => {
    const { id } = this.props?.match?.params
    const currUserId = this.props?.user?.info?._id

    if (id) {
      const data = await apiGetProjectById(id)
      const date = moment(data.createdAt).calendar()
      const members = data.members.map(v => ({
        ...v,
        isCurrUser: currUserId === v._id,
      }))

      this.setState({
        data: {
          ...data,
          date,
          members,
          owner: { nickname: data.owner.nickname, avatar: serverUrl + data.owner.avatar },
        },
        isOwner: currUserId === data.owner._id,
      })
    }
  }

  render() {
    const { data, isOwner } = this.state

    return (
      <>
        <TopBar />

        <div className={styles.outer}>
          <div className={styles.info_wrapper}>
            <Breadcrumb className={styles.links}>
              <Breadcrumb.Item href='/'>Home</Breadcrumb.Item>
              <Breadcrumb.Item>Project Detail</Breadcrumb.Item>
            </Breadcrumb>

            <h2 className={styles.title}>{data.title}</h2>
            <div className={styles.info}>
              <Avatar src={data.owner.avatar} size='large' />
              <div className={styles.text}>
                <b className={styles.name}>{data.owner.nickname}</b>
                <div>
                  <span className={styles.date}>create at {data.date}</span>
                  {isOwner && (
                    <Link to={`/project-edit/${data._id}`}>
                      <Button size='small' type='primary' ghost>
                        Edit
                      </Button>
                    </Link>
                  )}
                </div>
              </div>
            </div>

            <p className={styles.desc}>{data.desc}</p>
          </div>
        </div>

        <Divider></Divider>

        <Row justify='center'>
          {data.members.map(u => (
            <Col key={u._id} xs={24} sm={12} md={8} lg={6} xl={6} xxl={4}>
              <TodoList projectId={data._id} user={u} />
            </Col>
          ))}
        </Row>
      </>
    )
  }
}

export default Project
